<template>
  <view class="container">
    <!-- 页面顶部 -->
    <view class="head-info">
      <view class="cart-total">
        <text>共</text>
        <text class="active">{{ total }}</text>
        <text>件商品</text>
      </view>
      <view class="cart-edit">
        <view class="normal">
          <text class="icon iconfont icon-bianji"></text>
          <text @click="delState">编辑</text>
        </view>
        <!-- <view class="edit">
          <text>完成</text>
        </view> -->
      </view>
    </view>
    <!-- 购物车商品列表 -->
    <view class="cart-list" v-if="list.length">
      <view class="cart-item" v-for="(item, index) in list" :key="item.id">
        <!-- 选择按钮 -->
        <label class="item-radio" @click.stop="handleCheckItem(item.id, index)">
          <radio class="radio" color="#fa2209" :checked="item.flag" />
        </label>
        <!-- 图片 -->
        <view class="goods-image">
          <image
            class="image"
            :src="item.goods.goods_image"
            mode="scaleToFill"
            @click="redirect(item.goods_id)"
          ></image>
        </view>
        <!-- 商品信息 -->
        <view class="item-content">
          <view class="goods-title" @click="redirect(item.goods_id)">
            <text class="twoline-hide">{{ item.goods.goods_name }}</text>
          </view>
          <view class="goods-props clearfix" @click="redirect(item.goods_id)">
            <view
              class="goods-props-item"
              v-for="(props, idx) in item.goods.skuInfo.goods_props"
              :key="idx"
            >
              <text>{{ props.value.name }}</text>
            </view>
          </view>
          <!-- 价格 -->
          <view class="item-foot">
            <view class="goods-price">
              <text class="unit">￥</text>
              <text class="value">{{ item.goods.skuInfo.goods_price }}</text>
            </view>
            <!-- 数量 -->
            <view class="stepper">
              <uni-number-box
                :min="1"
                :value="item.goods_num"
                :max="item.goods.skuInfo.stock_num"
                @change="onChangeStepper($event, item)"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 购物车数据为空 -->
    <view class="empty-content" v-if="!list.length">
      <view class="empty-icon">
        <image class="image" src="/static/empty.png" mode="widthFix"></image>
      </view>
      <view class="tips">购物车空荡荡~</view>
      <view class="empty-ipt" @click.stop="skipHomePage">
        <text>去逛逛</text>
      </view>
    </view>
    <!-- 底部操作栏 -->
    <view class="footer-fixed" v-if="list.length">
      <label class="all-radio" @click.stop="selectClick">
        <radio class="radio" color="#fa2209" :checked="checkAll" />
        <text>全选</text>
      </label>
      <view class="total-info">
        <text>合计：</text>
        <view class="goods-price">
          <text class="unit">￥</text>
          <text class="value">{{ totalPrice }}</text>
        </view>
      </view>
      <view class="cart-action">
        <view class="btn-wrapper">
          <view
            v-if="!set"
            class="btn-item btn-main"
            :class="{ disabled: !checkedIds.length }"
          >
            <text @click="goToOrderCreate" v-if="checkedIds.length > 0"
              >去结算 ({{ selectTotal }})</text
            >
            <text @click="goToOrderCreates" v-else
              >去结算 ({{ selectTotal }})</text
            >
          </view>
          <view
            class="btn-item btn-main"
            v-if="set"
            :class="{ disabled: !checkedIds.length }"
          >
            <text @click="delCommodity">删除</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { inArray } from '@/utils/util'
import { list, update, clear } from '@/api/cart'
export default {
  data () {
    return {
      inArray,
      // 正在加载
      isLoading: true,
      // 购物车商品列表
      list: [],
      // 购物车商品总数量
      total: null,
      // 选中的商品
      checkedIds: [],
      // 选中的商品总金额
      totalPrice: '0.00',
      // 选择的商品数量
      selectTotal: 0,
      // 全选
      checkAll: false,
      // 设置状态
      set: false
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow () {
    this.getCartList()
  },
  methods: {
    // 获取页面数据
    async getCartList () {
      this.isLoading = true
      const res = await list()
      this.list = res.data.list.map(i => {
        i.flag = false
        return i
      })
      this.total = res.data.cartTotal
      this.isLoading = false
      this.set = false
    },
    // 修改商品状态
    handleCheckItem (id) {
      // 修改商品状态
      const res = this.list.find(v => v.id === id)
      res.flag = !res.flag

      // 选择了的商品
      this.checkedIds = this.list.filter(v => v.flag)
      this.selectPrice()
      // 小选判断全选
      if (this.checkedIds.length === this.list.length) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
    },
    // 计算商品总价和数量
    selectPrice () {
      // 选择了的商品数量
      this.selectTotal = this.checkedIds.reduce((q, h) => {
        return q + h.goods_num
      }, 0)
      // 选择了的商品总价
      this.totalPrice = this.checkedIds.reduce((q, h) => {
        return q + h.goods_num * h.goods.skuInfo.goods_price
      }, 0)
    },
    // 商品数量修改
    async onChangeStepper (value, item) {
      // console.log(value)
      // console.log(item)
      await update(item.goods_id, item.goods_sku_id, value)
      this.getCartList()
      this.selectPrice()
    },
    // 点击全选
    selectClick () {
      this.checkAll = !this.checkAll

      this.list.forEach(v => (v.flag = this.checkAll))
      // 选择了的商品
      this.checkedIds = this.list.filter(v => v.flag)

      // 选择了的商品数量
      this.selectTotal = this.checkedIds.reduce((q, h) => {
        return q + h.goods_num
      }, 0)
      // 选择了的商品总价
      this.totalPrice = this.checkedIds.reduce((q, h) => {
        return q + h.goods_num * h.goods.skuInfo.goods_price
      }, 0)
    },
    // 点击编辑
    delState () {
      this.set = !this.set
    },
    // 点击删除
    async delCommodity () {
      const arr = []
      this.checkedIds.map(i => {
        arr.push(i.id)
      })
      uni.showModal({
        title: '提示',
        content: '您确定要删除该商品吗?',
        success: async ({ confirm }) => {
          if (confirm) {
            await clear(arr)
            this.checkedIds = []
            this.totalPrice = '0.00'
            this.getCartList()
            uni.showToast({
              title: '删除成功'
            })
          }
        }
      })
    },
    // 点击商品跳转详情
    redirect (id) {
      uni.navigateTo({ url: '/pages/goods/detail?goodsId=' + id })
    },
    // 去结算
    goToOrderCreate () {
      const id = this.checkedIds.map(i => {
        return i.id
      })
      const cartIds = id.join()
      uni.navigateTo({
        url: `/pages/checkout/index?mode=cart&&cartIds=${cartIds}`
      })
    },
    goToOrderCreates () {
      uni.showToast({ title: '请选择商品', icon: 'error' })
    },
    skipHomePage () {
      uni.switchTab({ url: '/pages/index/index' })
    }
  }
}
</script>

<style>
page {
  background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.empty-content {
  box-sizing: border-box;
  width: 100%;
  padding: 140rpx 50rpx;
  text-align: center;

  .tips {
    font-size: 28rpx;
    color: gray;
    margin: 50rpx 0;
  }

  .empty-icon .image {
    width: 280rpx;
  }
}
// 页面顶部
.head-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rpx 30rpx;
  // background-color: #fff;
  height: 80rpx;

  .cart-total {
    font-size: 28rpx;
    color: #333;

    .active {
      color: #fa2209;
      margin: 0 2rpx;
    }
  }

  .cart-edit {
    padding-left: 20rpx;

    .icon {
      margin-right: 12rpx;
    }

    .edit {
      color: #fa2209;
    }
  }
}

// 购物车列表
.cart-list {
  padding: 0 16rpx 110rpx 16rpx;
}

.cart-item {
  background: #fff;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  padding: 30rpx 16rpx;
  margin-bottom: 24rpx;

  .item-radio {
    width: 56rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin-right: 10rpx;
    text-align: center;

    .radio {
      transform: scale(0.76);
    }
  }

  .goods-image {
    width: 200rpx;
    height: 200rpx;

    .image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }
  }

  .item-content {
    flex: 1;
    padding-left: 24rpx;

    .goods-title {
      font-size: 28rpx;
      max-height: 76rpx;
    }

    .goods-props {
      margin-top: 14rpx;
      height: 40rpx;
      color: #ababab;
      font-size: 24rpx;
      overflow: hidden;

      .goods-props-item {
        display: inline-block;
        margin-right: 14rpx;
        padding: 4rpx 16rpx;
        border-radius: 12rpx;
        background-color: #f5f5f5;
        width: auto;
      }
    }

    .item-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;

      .goods-price {
        vertical-align: bottom;
        color: $uni-text-color-active;

        .unit {
          font-size: 24rpx;
        }

        .value {
          font-size: 32rpx;
        }
      }
    }
  }
}

// 空数据按钮
.empty-ipt {
  width: 220rpx;
  margin: 0 auto;
  font-size: 32rpx;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  color: #fff;
  border-radius: 50rpx;
  background: linear-gradient(to right, #f9211c, #ff6335);
}

// 底部操作栏
.footer-fixed {
  display: flex;
  align-items: center;
  height: 96rpx;
  background: #fff;
  padding: 0 30rpx;
  position: fixed;
  bottom: var(--window-bottom);
  left: 0;
  right: 0;
  z-index: 11;

  .all-radio {
    width: 140rpx;
    display: flex;
    align-items: center;

    .radio {
      margin-bottom: -4rpx;
      transform: scale(0.76);
    }
  }

  .total-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 30rpx;

    .goods-price {
      vertical-align: bottom;
      color: #fa2209;

      .unit {
        font-size: 24rpx;
      }

      .value {
        font-size: 32rpx;
      }
    }
  }

  .cart-action {
    width: 200rpx;

    .btn-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      color: #fff;
      border-radius: 50rpx;
    }

    // 立即购买按钮
    .btn-main {
      background: linear-gradient(to right, #f9211c, #ff6335);

      // 禁用按钮
      &.disabled {
        background: #ff9779;
      }
    }
  }
}
</style>
